<template>
  <el-drawer
    v-if="visible"
    class="appealDetail"
    :visible.sync="visible"
    :with-header="false"
    :append-to-body="true"
    size="85%"
  >
    <div class="title">
      <div class="title-text">一户一码申诉{{ detail.appealCode }}</div>
      <el-tag class="tag">{{
        formatColumnMap(opStatusSourceMap, 'value', detail.opStatus, 'desc')
      }}</el-tag>
    </div>

    <!-- 左右布局 -->
    <div class="center">
      <!-- 左侧 -->
      <div class="left">
        <div class="client-box">
          <div class="title">客户信息</div>
          <div class="client-table">
            <div class="table-one-row">
              <div class="client-name">客户名称</div>
              <div class="client-value">{{ detail.csmName }}</div>
              <div class="client-name">客户编号</div>
              <div class="client-value">
                <span class="csmCode">{{ detail.csmCode }}</span>
              </div>
            </div>
            <div class="table-one-row">
              <div class="client-name">联系人</div>
              <div class="client-value">{{ detail.csmName }}</div>
              <div class="client-name">联系电话</div>
              <div class="client-value">{{ detail.csmPhone }}</div>
            </div>
            <div class="table-two-row">
              <div class="client-name">联系地址</div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="detail.oldAddress"
                placement="top"
              >
                <div
                  class="client-value"
                  style="width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;"
                >
                  {{ detail.oldAddress }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="client-box">
          <div class="title">订单基本信息</div>
          <div class="client-table">
            <div class="table-one-row">
              <div class="client-name">申诉号</div>
              <div class="client-value">{{ detail.appealCode }}</div>
              <div class="client-name">申诉来源</div>
              <div class="client-value">
                {{
                  detail.appealFrom ? formatColumnMap(appealFromMap, 'value', detail.appealFrom, 'desc') : ''
                }}
              </div>
            </div>
            <div class="table-one-row">
              <div class="client-name">关联订单</div>
              <div class="client-value linkCode" @click="showOrderDetail(detail.billCode)">
                {{ detail.billCode }}
              </div>
              <div class="client-name">申诉时间</div>
              <div class="client-value">
                {{
                  detail.appealDt
                    ? parseTime(detail.appealDt, "{y}-{m}-{d} {h}:{i}")
                    : ""
                }}
              </div>
            </div>

            <div class="table-one-row">
              <div class="client-name">申诉原因</div>
              <div class="client-value">
                {{ detail.appealReason ? formatColumnMap(appealReasonMap, 'keyId', detail.appealReason, 'keyName') : '' }}
              </div>
              <div class="client-name">处理时间</div>
              <div class="client-value" style="color: #f00;">
                {{ detail.opertorDt
                  ? parseTime(detail.opertorDt, "{y}-{m}-{d} {h}:{i}")
                  : "" }}
              </div>
            </div>
            <div class="table-two-row">
              <div class="client-name">备注</div>
              <div class="client-value">
                {{ detail.remark }}
              </div>
            </div>
            <div class="table-two-row">
              <div class="client-name">变更前地址</div>
              <div class="client-value">
                {{ detail.oldAddress }}
              </div>
            </div>
            <div class="table-two-row">
              <div class="client-name">变更后地址</div>
              <div class="client-value">{{ detail.newAddress }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div v-if="flowInfoData.length > 0" class="timeline-title">一户一码流转信息--申诉号{{ flowInfoData[0].billCode }}</div>
        <el-timeline>
          <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.happendDt, '{y}-{m}-{d} {h}:{i}')} ${item.operator}`" placement="top">
            <el-card>
              <h4>{{ item.traceDesc }}</h4>
              <!-- <h4 v-if="!item.marker">{{ `备注:${item.other||''}` }}</h4> -->
              <h4 v-if="item.marker">{{ `${item.marker}` }}：<span style="color: #FC9;">{{ item.other }}</span></h4>
              <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 底部 -->
    <div
      class="demo-drawer__footer"
      style="padding: 0 10px 10px 0; text-align: right;"
    >
      <div class="btn-group">
        <div class="btns">
          <el-button v-if="detail.opStatus === 1 && detail.bindStatus !== 1" type="primary" @click="unBind"> 解绑 </el-button>
          <el-button v-if="detail.opStatus === 1" type="primary" @click="allowSign">
            允许签收
          </el-button>
          <el-button v-if="detail.opStatus === 1" type="danger" @click="avoidOne"> 作废 </el-button>
        </div>
      </div>
    </div>
    <order-detail
      ref="orderDetail"
      :payment-method-map="paymentMethodMap"
      :pay-status-map="payStatusMap"
      :transactor-list="transactorList"
      :order-flag-map="orderFlagMap"
      :order-source-map="orderSourceMap"
      :order-status-map="orderStatusMap"
    />
  </el-drawer>
</template>

<script>
  import { formatColumnMap, parseTime } from '@/utils'
  import { queryTransactorList, queryMap, queryCommontrac, avoidOneHouseOneCode, allowSignOneHouseOneCode, unBindOneHouseOneCode, appealDetail, queryDictionaries } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import OrderDetail from '@/views/orderCenter/orderManage/components/OrderDetails'
  export default {
    name: 'appealDetail',
    components: {
      OrderDetail
    },
    data() {
      return {
        parseTime,
        visible: false,
        detail: {},
        flowInfoData: [],
        paymentMethodMap: [],
        payStatusMap: [],
        orderSourceMap: [],
        transactorList: [],
        orderStatusMap: [],
        orderFlagMap: [],
        paymenFilList: [],
        temp: {},
        appealFromMap: [],
        opStatusSourceMap: [],
        appealReasonMap: []
      }
    },
    created() {
      this.queryOptionsMap()
    },
    methods: {
      formatColumnMap,
      async open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.temp = temp
          this.queryOptionsMap()
          this.getDetailData()
          this.getAppealData()
        })
      },
      async getAppealData() {
        const params = {
          appealCode: this.temp.appealCode
        }
        const res = await appealDetail(params)
        this.detail = res.data || {}
        console.log(res)
      },

      async showOrderDetail(code) {
        if (!code) return
        const row = {
          orderCode: code
        }

        const orderDetail = document.getElementsByClassName('orderDetail')[0]
        if (!orderDetail) {
          await this.$refs.orderDetail.open(row, true)
        } else {
          this.$message.warning('该信息弹窗已存在，请关闭当前弹窗')
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5, res6, res7, res8] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'CsmQRAppealFrom' }),
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' }),
          mergeAsyncFunc(queryMap, { enumName: 'CsmQROpStatus' }),
          mergeAsyncFunc(queryDictionaries, { commonKeys: 6 })
        ])
        this.appealFromMap = res1.data || []
        // 过滤支付方式
        const arr = ['现金', '微信支付', '支付宝', '银行支付']
        res2.data.filter(item => {
          if (arr.includes(item.desc)) {
            this.paymenFilList.push(item)
          }
        })
        this.paymentMethodMap = res2.data.filter(
          item =>
            item.value === 1 ||
            item.value === 2 ||
            item.value === 16 ||
            item.value === 128 ||
            item.value === 256 ||
            item.value === 2048
        ) // 支付方式
        this.orderStatusMap = res3.data.filter(item => item.value !== 6) // 订单类型(去掉‘已转派’)
        this.orderFlagMap = res4.data // 订单类型
        this.payStatusMap = res5.data // 支付状态
        this.orderSourceMap = res6.data // 订单来源
        this.opStatusSourceMap = res7.data || []
        this.appealReasonMap = res8.data // 原因
        this.getTransactorList()
      },
      // 获取下单人列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      },
      // 流转信息
      async getDetailData() {
        const res = await queryCommontrac({ billCode: this.temp.appealCode, billType: 2048 })
        this.flowInfoData = res.data || []
      },
      // 解绑
      unBind() {
        this.$confirm(`您确认解绑吗?`, '提示', {
          type: 'warning'
        }).then(() => {
          unBindOneHouseOneCode({ appealCode: this.temp.appealCode }).then(res => {
            this.$notify({
              title: '提示',
              message: `操作成功`,
              type: 'success',
              duration: 2000
            })
            this.visible = false
            this.resolve()
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {
          this.$message.info('已取消')
        })
      },
      // 允许签收
      allowSign() {
        this.$confirm(`您确认允许签收吗?`, '提示', {
          type: 'warning'
        }).then(() => {
          allowSignOneHouseOneCode({ appealCode: this.temp.appealCode }).then(res => {
            this.$notify({
              title: '提示',
              message: `操作成功`,
              type: 'success',
              duration: 2000
            })
            this.visible = false
            this.resolve()
          }).catch(err => { console.log(err) })
        }).catch(() => {
          this.$message.info('已取消')
        })
      },
      // 作废
      avoidOne() {
        this.$confirm(`您确认作废吗?`, '提示', {
          type: 'warning'
        }).then(() => {
          avoidOneHouseOneCode({ appealCode: this.temp.appealCode }).then(res => {
            this.$notify({
              title: '提示',
              message: `操作成功`,
              type: 'success',
              duration: 2000
            })
            this.visible = false
            this.resolve()
          }).catch(err => { console.log(err) })
        }).catch(() => {
          this.$message.info('已取消')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer__header {
  padding: 15px 20px;
  margin-bottom: 0;
}

.center {
  display: flex;
  height: calc(100vh - 120px);
  padding: 0 20px;
  overflow-y: auto;
  // height: 700px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
  .left {
    position: relative;
    width: 75%;
    height: 100%;
    padding-right: 40px;
    .el-descriptions {
      margin-bottom: 20px;
    }
    .client-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38bdbd;
      }
      .client-table {
        border: 1px solid #e3e3e3;
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-two-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            padding: 10px 0;
            text-align: left;
            flex: 1;
          }
        }
        .table-two-row:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .right {
    height: 100%;
    padding-left: 15px;
    border-left: 1px solid #e3e3e3;
    flex: 1;
    .timeline-title {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      color: white;
      background-color: #38bdbd;
      border-radius: 5px;
    }
    .el-timeline {
      margin-top: 20px;
    }
  }
}
.demo-drawer__footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background: white;
  border: 2px solid #dcdfe6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 21%;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
.title {
  display: flex;
  padding: 20px 20px 0 20px;
  // margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
  .tag {
    margin: 0 10px;
  }
}
.label-child {
  position: absolute;
  top: 30px;
  right: 10px;
  width: 90px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  transform: rotate(50deg);
}
// .red {
//   background-color: #F56C6C;
//   border-color: red;
// }
// .green {
//   background-color: #38BDBD;
//   border-color: #1D7471;
// }
// .csmCode {
//   color: #38BDBD;
//   cursor: pointer;
// }
.linkCode {
  color: #38BDBD;
  cursor: pointer;
}
</style>
